<template>
  <div class="upload-container">
    <el-button icon="el-icon-upload" size="mini" type="primary" @click="deleteVideo" v-if="videoPath">
      删除视频
    </el-button>
    <el-button icon="el-icon-upload" size="mini" type="primary" @click="showDialog">
      上传视频
    </el-button>
    <el-dialog :visible.sync="dialogVisible">
      <el-upload
        class="upload-video"
        drag
        :show-file-list="false"
        :on-success="handleUploadSuccess"
        :before-upload="beforeVideoUpload"
        :on-error="handleUploadError"
        :on-progress="handleProgress"
        action="/api/spot/uploadAttachment">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传MP4文件，且不超过100MB</div>
        <el-progress v-if="videoFlag === true" type="circle" :percentage="videoUploadPercent"></el-progress>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import PubSub from 'pubsub-js'

export default {
  name: 'EditorVideo',
  data () {
    return {
      spot: {},
      dialogVisible: false,
      videoFlag: false,
      videoUploadPercent: 0,
      videoPath: ''
    }
  },
  created () {
    PubSub.subscribe('SELECTED-SPOT', (event, data) => {
      this.spot = data
      this.videoPath = data.videoPath
    })
  },
  mounted () {

  },
  methods: {
    showDialog () {
      this.dialogVisible = true
    },
    hiddenDialog () {
      this.dialogVisible = false
    },
    deleteVideo () {
      let spotId = this.spot.id
      let url = '/api/spot/removeVideo/' + spotId
      axios.post(`${url}`)
        .then(res => {
          if (res.data.code === 'S200') {
            this.videoPath = ''
            PubSub.publish('REMOVE-VIDEO', new Date())
            PubSub.publish('REFRESH-SPOT', false)
            this.$message.success('视频已删除')
          }
        }, res => {
          this.$message.error('删除失败，请重试')
        })
    },
    beforeVideoUpload (file) {
      const isMP4 = file.type === 'video/mp4'
      if (!isMP4) {
        this.$message.error('请使用MP4格式视频文件')
      }
      const isLt100M = file.size / 1024 / 1024 < 100
      if (!isLt100M) {
        this.$message.error('无法上传超过100MB的视频文件，请更换视频文件')
      }
      return isMP4 && isLt100M
    },
    handleUploadSuccess (response, file, fileList) {
      let spotId = this.spot.id
      this.videoPath = response.data
      let url = '/api/spot/setVideo/' + spotId + '?videoPath=' + this.videoPath
      axios.post(`${url}`)
        .then(res => {
          if (res.data.code === 'S200') {
            this.pubVideoId(this.videoPath)
            this.$message.success('上传成功')
            PubSub.publish('REFRESH-SPOT', false)
            this.resetDialog()
          }
        }, res => {
          this.$message.error('保存失败，请重试或联系技术人员')
          this.resetDialog()
        })
    },
    handleUploadError (ex, file, fileList) {
      this.$message.error('上传失败，请重试或联系技术人员')
      this.resetDialog()
    },
    handleProgress (event, file, fileList) {
      this.videoFlag = true
      let strPercentage = file.percentage.toFixed(0)
      this.videoUploadPercent = Number(strPercentage)
    },
    pubVideoId (videoid) {
      PubSub.publish('VIDEO-ID', videoid)
    },
    resetDialog () {
      this.videoFlag = false
      this.videoUploadPercent = 0
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .editor-slide-upload
    margin-bottom: 20px

  .upload-video
    width 100%

    .el-upload
      width 100%

      .el-upload-dragger
        width 100%

    .el-progress
      top -100px
</style>
